<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" rel="stylesheet" />
<link href="gallery.css" rel="stylesheet" />
<script>
	var curImage = null;
	function scrollX() {
	    // A shortcut, in case we?e using Internet Explorer 6 in Strict Mode
	    var de = document.documentElement;

	    // If the pageXOffset of the browser is available, use that
	    return self.pageXOffset ||

	        // Otherwise, try to get the scroll left off of the root node
	        ( de && de.scrollLeft ) ||

	        // Finally, try to get the scroll left off of the body element
	        document.body.scrollLeft;
	}

	    
	// A function for determining how far vertically the browser is scrolled
	function scrollY() {
	    // A shortcut, in case we?e using Internet Explorer 6 in Strict Mode
	    var de = document.documentElement;

	    // If the pageYOffset of the browser is available, use that
	    return self.pageYOffset ||

	        // Otherwise, try to get the scroll top off of the root node
	        ( de && de.scrollTop ) ||

	        // Finally, try to get the scroll top off of the body element
	        document.body.scrollTop;
	}

	// Find the height of the viewport
	function windowHeight() {
	    // A shortcut, in case we?e using Internet Explorer 6 in Strict Mode
	    var de = document.documentElement;

	    // If the innerHeight of the browser is available, use that
	    return self.innerHeight ||

	        // Otherwise, try to get the height off of the root node
	        ( de && de.clientHeight ) ||

	        // Finally, try to get the height off of the body element
	        document.body.clientHeight;
	}

	// Find the width of the viewport
	function windowWidth() {
	    // A shortcut, in case we?e using Internet Explorer 6 in Strict Mode
	    var de = document.documentElement;

	    // If the innerWidth of the browser is available, use that
	    return self.innerWidth ||

	        // Otherwise, try to get the width off of the root node
	        ( de && de.clientWidth ) ||

	        // Finally, try to get the width off of the body element
	        document.body.clientWidth;
	}
	function getStyle( elem, name ) {
	    // If the property exists in style[], then it? been set recently (and is current)
	    if (elem.style[name])
	        return elem.style[name];

	    // Otherwise, try to use IE? method
	    else if (elem.currentStyle)
	        return elem.currentStyle[name];

	    // Or the W3C? method, if it exists
	    else if (document.defaultView && document.defaultView.getComputedStyle) {
	        // It uses the traditional ?ext-align?style of rule writing, instead of textAlign
	        name = name.replace(/([A-Z])/g,"-$1");
	        name = name.toLowerCase();

	        // Get the style object and get the value of the property (if it exists)
	        var s = document.defaultView.getComputedStyle(elem,"");
	        return s && s.getPropertyValue(name);

	    // Otherwise, we?e using some other browser
	    } else
	        return null;
	}

	function next( elem ) {
	    do {
	        elem = elem.nextSibling;
	    } while ( elem && elem.nodeType != 1 );
	    return elem;
	}

	function prev( elem ) {
	    do {
	        elem = elem.previousSibling;
	    } while ( elem && elem.nodeType != 1 );
	    return elem;
	}
	
	function id(eId){
		var elem = document.getElementById(eId);
		return elem;
	}
	function byClass(name,type){
		var r=[];
		var re = new RegExp("(^|\\s)" + name + "(\\s|$)");
		var elem = document.getElementsByTagName(type);
		
		for(var i=0;i<elem.length;i++){
			if(re.test(elem[i].className)){
				r.push(elem[i]);
			}
		}
		return r;
	}
	
	function tag(name,root){
		return root.getElementsByTagName(name);
	}
	
	function pageWidth(){
		return document.body.scrollWidth;
	}
	
	function pageHeight(){
		return document.body.scrollHeight;
	}
	function getHeight( elem ) {
	    // Gets the computed CSS value and parses out a usable number
	    return parseInt( getStyle( elem, "height" ) );
	}

	// Get the actual width (using the computed CSS) of an element
	function getWidth( elem ) {
	    // Gets the computed CSS value and parses out a usable number
	    return parseInt( getStyle( elem, "width" ) );
	}
	
	function setX(elem, pos) {
	    // Set the ?eft?CSS property, using pixel units
	    elem.style.left = pos + "px";
	}

	// A function for setting the vertical position of an element
	function setY(elem, pos) {
	    // Set the ?eft?CSS property, using pixel units
	    elem.style.top = pos + "px";
	}
	function hide(elem){
		var curDisplay=getStyle(elem,"display");
	//  Remember its display state for later
	    if ( curDisplay != "none" )
	        elem.$oldDisplay = curDisplay;

	    // Set the display to none (hiding the element)
	    elem.style.display = "none";
	}
	function show( elem ) {
	    // Set the display property back to what it use to be, or use
	    // ?lock? if no previous display had been saved
	    elem.style.display = elem.$oldDisplay || "block";
	}
	function nextImage(){
		showImage(next(curImage));
	}
	
	function prevImage(){
		showImage(prev(curImage));
	}
	
	function setOpacity(elem,level){
		if(elem.filters){
			elem.style.filter= 'alpha(opacity='+level+')';;
		}else{
			elem.style.opacity = level/100;
		}
	}
	
	function fadeIn(elem,to,speed){
		setOpacity(elem,0);
		show(elem);
		for(var i=0;i<=100;i+=speed){
			(function(){
				var opacity  = i;
				setTimeout(function(){
					setOpacity(elem,( opacity / 100 ) * to);
				},( i + 1 ) * speed);
			})();
		}
	}
	
	function fadeOut( elem, to, speed ) {
	    for ( var i = 0; i < 100; i += 5 ) {      
			(function(){	        		
				var opacity = i;
				setTimeout(function(){
	                setOpacity( elem, 100 - opacity ); 
					if ( opacity == 95 ){                    
						hide( elem );
					}
	            }, ( i + 1 ) * speed );
	        })();
	    }
	}
	
	function hideOverlay(){
		curImage = null;
		hide(id("overlay"));
		hide(id("gallery"));
		
		return false;
	}
	
	function showOverlay(){
		var over = id("overlay");
		over.style.height = pageHeight()+"px";
		over.style.width = pageWidth()+"px";
		
		fadeIn(over,50,10);
	}
	
	function showImage(cur){
		curImage = cur;
		var img = id("gallery_image");
		if(img.firstChild){
			img.removeChild(img.firstChild);
		}
		
		img.appendChild(cur.firstChild.cloneNode(true));
		id("gallery_title").innerHTML=cur.firstChild.firstChild.alt;
		var gallery = id("gallery");
		gallery.className = cur.className;
		fadeIn(gallery,100,10);
		
		if(!next(cur)){
			hide(id("gallery_next"));
		}else{
			show(id("gallery_next"));
		}
		
		if(!prev(cur)){
			hide(id("gallery_prev"));
		}else{
			show(id("gallery_prev"));
		}
		adjust();
	}
	
	function adjust(){
		var obj = id("gallery");
		if(!obj){
			return;
		}
		var w = getWidth(obj);
		var h = getHeight(obj);
		
		var t = scrollY() +(windowHeight()/2)-(h/2);
		if(t<0) t =  0 ;
		
		var l = scrollX()+(windowWidth()/2)-(w/2);
		if(l<0)l=0;
		setY(obj,t);
		setX(obj,l);		
	}
	
	function prevImage(){
		showImage(prev(curImage));
		return false;
	}
	
	function nextImage(){
		showImage(next(curImage));
		return false;
	}
	
	function addSlideshow(elem){
		var div = document.createElement("div");
		div.className =  "slideshow";
		
		var span = document.createElement("span");
		span.innerHTML = elem.title;
		div.appendChild(span);
		
		var a = document.createElement("a");
		a.href="";
		a.innerHTML = "&raquo;View as a Slideshow";
		a.onclick = function(){
			startShow(this.parentNode.nextSibling);
			return false;
		};
		div.appendChild(a);
		elem.parentNode.insertBefore(div,elem);
	}
	
	function startShow(obj) {
		var elem = tag( "li", obj );
		var gallery = id("gallery");
		for ( var i = 0; i < elem.length; i++ )  
			new function() {
				// Remember which current element is being referenced
				var cur = elem[i];
				
				// We're going to show a new image every 5 seconds
				setTimeout(function(){
						// Show the specific image
						showImage( cur );
						
						// And start fading it out after 3.5 seconds
						// (for a 1 second fade)
						setTimeout(function(){
								fadeOut( gallery, 0, 10 );
						}, 3500 );
				}, i * 5000 );
						
		};
		
		// And then hide the overlay when it's all over
		setTimeout( hideOverlay, 5000 * elem.length );
		
		// But show the overlay, as the slideshow is just starting
		showOverlay();
}
	
	window.onload=function(e){
		// Create the transparent, gray, overlay
		var overlay = document.createElement("div");
		overlay.id = "overlay";

		// Make it so that when the grey background is clicked,
		// the gallery and background are hidden
		overlay.onclick = hideOverlay;
		
		// Add the overlay into the DOM
		document.body.appendChild( overlay );
		
		// Create the overall gallery holder
		var gallery = document.createElement("div");
		gallery.id = "gallery";
		
		// And add in all the organization divs
		gallery.innerHTML = '<div id="gallery_image"></div>' +
				'<div id="gallery_prev"><a href="">&laquo; Prev</a></div>' +
				'<div id="gallery_next"><a href="">Next &raquo;</a></div>' +
				'<div id="gallery_title"></div>';
		
		// Add the gallery into the DOM
		document.body.appendChild( gallery );
		
		// Handle support for which the next and previous links
		// are clicked within the gallery
		id("gallery_next").onclick = nextImage;
		id("gallery_prev").onclick = prevImage;
		
		// Locate all the galleries on the site
		var g = byClass( "gallery", "ul" );
		
		// Go through all of them
		for ( var i = 0; i < g.length; i++ ) {
				// And locate all the links to the slideshow images
				var link = tag( "a", g[i] );
				
				// Go through each of the image links
				for ( var j = 0; j < link.length; j++ ) {
						// Make it such that, when clicked, they display the
						// image gallery instead of going to the imagae
						link[j].onclick = function(){
								// Show the gray background
								showOverlay();
								
								// Show the image, in the gallery
								showImage( this.parentNode );
								
								// Make sure that the browser doesn't go the
								// image, like it normally would
								return false;
						};
				}
				
				// We're going to create some extra contextual information
				// surrounding the slideshow
				
				// Create the slideshow header, wrapper
				var div = document.createElement("div");
				div.className = "slideshow";
				
				// Show the name of the slideshow, based upon the 
				// title of the gallery
				var span = document.createElement("span");
				span.innerHTML = g[i].title;
				div.appendChild( span );
				
				// Create a link so that we can view all the
				// gallery images as a slideshow
				var a = document.createElement("a");
				a.href = "";
				a.innerHTML = "&raquo; View as a Slideshow";
				
				// Make it so that it starts the slideshow
				// whenever it's clicked
				a.onclick = function(){
						startShow( this.parentNode.nextSibling );
						return false;
				};
				
				// Add the new navigation and header to the page
				div.appendChild( a );
				g[i].parentNode.insertBefore( div, g[i] );
		}
	}
</script>
</head>
<body>
 <h1>Random Cat Pictures</h1>
    
    <o>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at sem. Ut ultrices, dolor sit amet pharetra pretium, leo metus accumsan urna, eu ultrices purus augue at ligula. Nam gravida. Mauris neque lacus, vehicula et, hendrerit nec, semper quis, nibh. Nulla facilisi. Curabitur id ante. Proin felis ipsum, commodo non, hendrerit et, ultrices in, eros. Nulla tincidunt vulputate felis. Morbi convallis libero sed erat. Etiam lectus pede, dictum et, rutrum id, commodo nec, augue. Vestibulum massa. Fusce nec felis. Vivamus consectetuer elementum elit.</p>
    <p>Etiam mattis egestas felis. Proin sed magna at orci aliquet mattis. Vivamus ligula metus, interdum quis, viverra nec, vehicula vitae, mauris. Pellentesque venenatis pede vel augue. Aliquam fringilla nunc eget eros. Pellentesque eget ipsum. Morbi augue. Praesent sit amet ipsum. Ut vitae sem et diam mattis imperdiet. Phasellus a pede. Suspendisse potenti. Maecenas in sapien sit amet urna ultrices dignissim. Duis aliquet faucibus odio. Nunc a turpis vitae sem porta viverra. Vestibulum convallis dignissim nisl. Fusce enim. Morbi quam. Praesent tortor. Suspendisse eu dolor. Ut tempus tortor in dui.</p>
    <p>Aenean justo. Integer egestas pharetra quam. Nulla faucibus, mi vel mollis tempus, tortor libero fringilla odio, ac iaculis eros quam eget lorem. Pellentesque nec enim. Cras porta. Duis ornare libero vel risus. In hac habitasse platea dictumst. Quisque luctus, massa vitae placerat rhoncus, neque mauris lobortis enim, id ullamcorper dui nunc et enim. Integer faucibus rhoncus elit. Vestibulum ut ante. Morbi a sem. Vivamus accumsan.</p>
    <p>Maecenas bibendum tellus at ante. Maecenas pharetra volutpat mauris. Vivamus vulputate. Pellentesque nec pede. Pellentesque aliquet, tellus nec placerat bibendum, lacus augue mattis tellus, id iaculis enim augue ac sapien. Maecenas commodo ante quis tellus. Phasellus tempor, massa non malesuada cursus, tortor justo mollis diam, eget sagittis dolor ipsum at velit. Curabitur at pede eu magna sollicitudin accumsan. Duis quis velit nec justo condimentum aliquet. Mauris dignissim mi. Phasellus non mauris. Aliquam sagittis blandit magna.</p>
    <p>Etiam quam. Sed nisi. Maecenas viverra pellentesque ante. Fusce vulputate porta metus. Maecenas turpis urna, porta vitae, tempor vel, dapibus vestibulum, felis. Pellentesque sit amet nisl. Curabitur blandit. Sed in nisl et neque condimentum lacinia. Morbi arcu dui, dignissim in, consectetuer quis, gravida ac, felis. Proin lacinia aliquet augue. Mauris nec odio. Vestibulum eu orci nec ligula consequat rhoncus. Phasellus nunc nunc, vulputate posuere, semper in, cursus nec, orci. Curabitur sem justo, ullamcorper vitae, adipiscing in, malesuada vel, elit. Maecenas eleifend, justo sed ornare consequat, sem ipsum pellentesque turpis, in rutrum orci neque sed massa. Vestibulum laoreet dui eget arcu. Quisque in lorem. Morbi quis lacus. Maecenas nonummy metus auctor nunc. </p>
    
    <ul class="gallery" title="Random Cat Pictures">
    	<li><a href="image1"><img src="../images/image1.jpg" alt="Fat Cat Sleeping"/></a></li>
    	<li><a href="image2"><img src="../images/image2.jpg" alt="Sharing the Bed"/></a></li>
    	<li class="tall"><a href="image3"><img src="../images/image3.jpg" alt="Out the Window"/></a></li>
    	<li class="tall"><a href="image4"><img src="../images/image4.jpg" alt="In the Sun"/></a></li>
    	<li><a href="image5"><img src="../images/image5.jpg" alt="Very Comfortable"/></a></li>
    </ul>	
    
     <o>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at sem. Ut ultrices, dolor sit amet pharetra pretium, leo metus accumsan urna, eu ultrices purus augue at ligula. Nam gravida. Mauris neque lacus, vehicula et, hendrerit nec, semper quis, nibh. Nulla facilisi. Curabitur id ante. Proin felis ipsum, commodo non, hendrerit et, ultrices in, eros. Nulla tincidunt vulputate felis. Morbi convallis libero sed erat. Etiam lectus pede, dictum et, rutrum id, commodo nec, augue. Vestibulum massa. Fusce nec felis. Vivamus consectetuer elementum elit.</p>
    <p>Etiam mattis egestas felis. Proin sed magna at orci aliquet mattis. Vivamus ligula metus, interdum quis, viverra nec, vehicula vitae, mauris. Pellentesque venenatis pede vel augue. Aliquam fringilla nunc eget eros. Pellentesque eget ipsum. Morbi augue. Praesent sit amet ipsum. Ut vitae sem et diam mattis imperdiet. Phasellus a pede. Suspendisse potenti. Maecenas in sapien sit amet urna ultrices dignissim. Duis aliquet faucibus odio. Nunc a turpis vitae sem porta viverra. Vestibulum convallis dignissim nisl. Fusce enim. Morbi quam. Praesent tortor. Suspendisse eu dolor. Ut tempus tortor in dui.</p>
    <p>Aenean justo. Integer egestas pharetra quam. Nulla faucibus, mi vel mollis tempus, tortor libero fringilla odio, ac iaculis eros quam eget lorem. Pellentesque nec enim. Cras porta. Duis ornare libero vel risus. In hac habitasse platea dictumst. Quisque luctus, massa vitae placerat rhoncus, neque mauris lobortis enim, id ullamcorper dui nunc et enim. Integer faucibus rhoncus elit. Vestibulum ut ante. Morbi a sem. Vivamus accumsan.</p>
    <p>Maecenas bibendum tellus at ante. Maecenas pharetra volutpat mauris. Vivamus vulputate. Pellentesque nec pede. Pellentesque aliquet, tellus nec placerat bibendum, lacus augue mattis tellus, id iaculis enim augue ac sapien. Maecenas commodo ante quis tellus. Phasellus tempor, massa non malesuada cursus, tortor justo mollis diam, eget sagittis dolor ipsum at velit. Curabitur at pede eu magna sollicitudin accumsan. Duis quis velit nec justo condimentum aliquet. Mauris dignissim mi. Phasellus non mauris. Aliquam sagittis blandit magna.</p>
    <p>Etiam quam. Sed nisi. Maecenas viverra pellentesque ante. Fusce vulputate porta metus. Maecenas turpis urna, porta vitae, tempor vel, dapibus vestibulum, felis. Pellentesque sit amet nisl. Curabitur blandit. Sed in nisl et neque condimentum lacinia. Morbi arcu dui, dignissim in, consectetuer quis, gravida ac, felis. Proin lacinia aliquet augue. Mauris nec odio. Vestibulum eu orci nec ligula consequat rhoncus. Phasellus nunc nunc, vulputate posuere, semper in, cursus nec, orci. Curabitur sem justo, ullamcorper vitae, adipiscing in, malesuada vel, elit. Maecenas eleifend, justo sed ornare consequat, sem ipsum pellentesque turpis, in rutrum orci neque sed massa. Vestibulum laoreet dui eget arcu. Quisque in lorem. Morbi quis lacus. Maecenas nonummy metus auctor nunc. </p>
</body>
</html>